<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账单信息</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <!-- <link rel="stylesheet" href="css/comments.css" media="all"> -->
	<link rel="stylesheet" href="css/goods.css">
    <style>
		.maincontainer {
		    padding: 10px;
		}
        .layui-form-label{
            width: 130px;
        }
        @media screen and (max-width: 450px){
            .layui-form-item .layui-input-inline {
                margin-left: 160px;
            }
        }
        .layui-input-block{
            margin-left: 160px;
        }
        .payRecordFilesDiv,.payRecordFilesDiv1,#selectTable,.table_total{
            display: none;
        }
        .table_total{
            text-align: right;
        }
        .imgdiv{
            /* width: 200px;
            height: 300px; */
            overflow: hidden;
            background: #fff;
        }
        .imgdiv img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .addFile{
            width: 200px;
            height: 300px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 12px;
        }
        .addFile:hover {
            /* border: 1px dashed #f58843; */
            color: #f58843;
        }
        .addFile:hover i {
            color: #f58843;
        }
        .addFile i {
            font-size: 14px;
            color: #f5dab0;
            margin-right: 5px;
        }
        .addFileImg{
            width: 200px;
            height: 300px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            cursor: pointer;
            overflow: hidden;
            display: none;
        }
        .addFileImg img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .getBillBtn{
            display: none;
        }
        .modifyFile {
            width: 100px;
            height: 30px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 12px;
            margin-bottom: 16px;
        }
        .modifyFile:hover {
            border: 1px dashed #f58843;
            background: linear-gradient(316deg,#f58843 0%,#f56643 100%);;
            color: #fff;
        }
        .modifyFile:hover i {
            color: #fff;
        }
		
		/* 是否可以修改凭证 */
		.addImg{
			display:none;
		}
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            <span class="block_title"></span>
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">账单编号：</label>
                <div class="layui-form-mid layui-word-aux billNo"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">供应商名称：</label>
                <div class="layui-form-mid layui-word-aux supplierName"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开户名称：</label>
                <div class="layui-form-mid layui-word-aux bankUserName"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开户银行：</label>
                <div class="layui-form-mid layui-word-aux bankName"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">银行账号：</label>
                <div class="layui-form-mid layui-word-aux bankCardNum"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单内容</label>
                <div class="layui-input-block table">
                    <table class="layui-hide" id="selectTable" lay-filter="selectTable"></table>
                    <div class="table_total">合计：</div>
                </div>
            </div>
            <!-- <div class="layui-form-item payRecordFilesDiv">
                <label class="layui-form-label">支付凭证：</label>
                <div class="layui-input-block">
                    <div class="mainpicture"> -->
                        <!-- <div class="getBillBtn">
                            <input type="file" accept="image/*" id="modifyFile" multiple style="display: none;" name="">
                            <label class="modifyFile" for="modifyFile">
                                <i class="layui-icon layui-icon-upload"></i>修改
                            </label>
                        </div> -->
                        <!-- <div class="showMImg">

                        </div>
                    </div>
                </div>
            </div> -->
			<div class="layui-form-item payRecordFilesDiv">
			 	<label class="layui-form-label">支付凭证：</label>
			 	<div class="layui-input-inline">
			 		<div class="imgList">
			 			<ul class="mainpicture">
			 				<li class="nullimg detailsImg">
			 					<div> 
			 						<i class="layui-icon layui-icon-upload"></i>
			 						<p>上传图片</p>
			 					</div>
			 				</li>
			 				<li class="showDImg1" style="display: none">
			
			 				</li>
			 			</ul>
			 			<input type="file" accept="image/*" id="bannerUp" multiple style="display: none;" name="">
			 			<label class="addImg" for="bannerUp">
			 				<i class="layui-icon layui-icon-upload"></i>上传
			 			</label>
			 		</div>
			 	</div>
			</div>
            <div class="layui-form-item payRecordFilesDiv1" >
                <label class="layui-form-label">支付凭证：</label>
                <div class="layui-input-inline">
                    <input type="file" accept="image/*" id="fileUpLoad" multiple style="display: none;" name="">
                    <label class="addFile" for="fileUpLoad">
                        <i class="layui-icon layui-icon-upload"></i>上传
                    </label>
                    <label class="addFileImg" for="fileUpLoad">
                        <img src="" alt="">
                    </label>
                </div>
            </div>
			
            <div class="layui-form-item btnDiv">
            </div>
        </form>
    </div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container toolbarDemo">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="export" type="button">导出订单</button>
    </div>
</script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form', 'laydate', 'table'], function() {
        var http = layui.http,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;

        var id = http.getPid('id')
        var type = http.getPid('type')
        var deleteOrderList = []
        var imgFile
        
        init()
        function init(){
            http.get('admin/order/bill/findById/supplier',{
                id: id
            },function(res){
                if(res.code == 200){
                    var data = res.data
                    if(type==1){// 修改账单
                        $('.block_title').html('修改账单'+(data.status==1?' - 待结账':(d.status==2?' - 已付款待确认':(d.status==3?' - 已完成':''))))
                        var html = '<div class="layui-input-block"><button type="button" class="layui-btn modifyBtn">确认修改</button><button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button></div>'
                        $('.btnDiv').html(html)
                    }else if(type==2){ // 支付账单
                        $('.block_title').html('支付账单'+(data.status==1?' - 待结账':(data.status==2?' - 已付款待确认':(data.status==3?' - 已完成':''))))
                        var html = '<div class="layui-input-block"><button type="button" class="layui-btn payBtn">支付账单</button><button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button></div>'
                        $('.btnDiv').html(html)
                    }else if(type==3){ // 修改凭证
						$('.block_title').html('修改凭证'+(data.status==1?' - 待结账':(data.status==2?' - 已付款、待确认':(data.status==3?' - 已完成':''))))
						var html = '<div class="layui-input-block"><button type="button" class="layui-btn onupdateOrderBillPayRecordFile">确认修改</button><button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button></div>'
						$('.btnDiv').html(html)
					}else{
                        $('.block_title').html('账单详情'+(data.status==1?' - 待结账':(data.status==2?' - 已付款待确认':(data.status==3?' - 已完成':''))))
                    }
                    if(data.status == 2){
                        $('.getBillBtn').show()
                    }

                    $('.billNo').html(data.billNo)
                    $('.supplierName').html(data.supplierName)
                    $('.bankUserName').html(data.bankUserName)
                    $('.bankName').html(data.bankName)
                    $('.bankCardNum').html(data.bankCardNum)

                    if(type == 1){ // 订单内容
                        $('#selectTable').show()
                        $('.table_total').show()
                        var selectTable = http.table1({
                            elem: '#selectTable',
                            id: 'selectTable',
                            toolbar: '#toolbarDemo',
                            cols: [[
                                {field:'shopOrderNo', title: '订单编号', align : 'center',
                                    templet: function(d){
                                        var html = ''
                                        html += '<a class="buttoncolor" href="orderDetail.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
                                        return html
                                    }
                                },
                                {field:'foodManagerName', title: '餐饮总部名称', align : 'center'},
                                {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
                                {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                                {field:'goodCount', title: '商品数量', align : 'center'},
                                {field:'createTime', title: '下单时间', align : 'center'},
                                {field:'', title: '操作', align : 'center',fixed: 'right',width: 130,
                                    templet: function (d) {
                                        var html = '';
                                        html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" >删除</button>'
                                        return html;
                                    }
                                }
                            ]],
                            data: data.billInfoSingleWrapperOrderListVoList
                        })
                        
                        var sum = 0
                        for(var p=0;p<data.billInfoSingleWrapperOrderListVoList.length;p++){
                            sum += data.billInfoSingleWrapperOrderListVoList[p].orderTotalMoney
                        }
                        $('.table_total').html('合计：<span style="color: #fbaf7e">￥'+sum.toFixed(2)+'</span>')
                    }else{
                        $('#selectTable').show()
                        $('.table_total').show()
                        var selectTable = http.table1({
                            elem: '#selectTable',
                            id: 'selectTable',
                            toolbar: '#toolbarDemo',
                            cols: [[
                                {field:'shopOrderNo', title: '订单编号', align : 'center',
                                    templet: function(d){
                                        var html = ''
                                        html += '<a class="buttoncolor" href="orderDetail.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
                                        return html
                                    }
                                },
                                {field:'foodManagerName', title: '餐饮总部名称', align : 'center'},
                                {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
                                {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                                {field:'goodCount', title: '商品数量', align : 'center'},
                                {field:'createTime', title: '下单时间', align : 'center'}
                            ]],
                            data: data.billInfoSingleWrapperOrderListVoList
                        })
                        
                        var sum = 0
                        for(var p=0;p<data.billInfoSingleWrapperOrderListVoList.length;p++){
                            sum += data.billInfoSingleWrapperOrderListVoList[p].orderTotalMoney
                        }
                        $('.table_total').html('合计：<span style="color: #fbaf7e">￥'+sum.toFixed(2)+'</span>')

                    }

                    if(data.payRecordFiles){ // 支付凭证
                       /* $('.payRecordFilesDiv').show()
                        var imgId = http.getUUID();
						var html = '<div id="div'+imgId+'" class="imgdiv">'+
                                        '<img src="'+(TUrl+data.payRecordFiles)+'" id="proimg'+imgId+'" onclick="onShowImg(\''+data.payRecordFiles+'\')">'+
                                    '</div>';
						
                        $('.showMImg').html(html); */
						$('.payRecordFilesDiv').show()
						$('.detailsImg').hide()
						$('.showDImg1').show().siblings('li').hide();
						var imghtml = '';
						var smallPic = JSON.parse(data.payRecordFiles);
						
						if(type==3){ // 可修改
							$('.addImg').css('display','flex');
							for(var i=0;i<smallPic.length;i++){
								var imgId = http.getUUID();
								imghtml += '<div id="div'+imgId+'" class="imgdiv" onmouseover="showOperation(\'span'+imgId+'\')" onmouseout="hideOperation(\'span'+imgId+'\')">'+
												'<img onurl="'+smallPic[i]+'" src="'+(TUrl+smallPic[i])+'" id="proimg'+imgId+'">'+
												'<ul class="imgul" id="span'+imgId+'">'+
													'<li onclick="deleteimg(\'div'+imgId+'\')">移除</li>'+
												'</ul>'+
											'</div>';
							}
						}else{ // 不可修改
							for(var i=0;i<smallPic.length;i++){
								imghtml += '<div class="imgdiv">'+
												'<img src="'+(TUrl+smallPic[i])+'" onclick="onShowImg(\''+smallPic[i]+'\')">'+
											'</div>';
							}
						}
						$('.showDImg1').html(imghtml);
                    }else if(type==2){
						$('.payRecordFilesDiv').show()
						$('.addImg').css('display','flex');
                        // $('.payRecordFilesDiv1').show()
                    }
                    
                    // table操作
                    table.on('tool(selectTable)', function(obj){
                        if(obj.event=='del'){
                            // 删除
                            // console.log(obj)
                            var index = $(obj.tr).index()
                            data.billInfoSingleWrapperOrderListVoList.splice(index,1)
                            deleteOrderList.push(obj.data.shopOrderNo)
                            table.reload('selectTable');
                        }
                    })
                    // table的toolbar
                    table.on('toolbar(selectTable)', function (obj) {
                        if(obj.event=='export'){ // 导出
                            var param = {
                                id: id,
                                authentication: localStorage.getItem('xi-can-management-authentication')
                            }
                            if (param) {  
                                let paramsArray = [];  
                                //encodeURIComponent  
                                Object.keys(param).forEach(key => paramsArray.push(key + '=' + param[key]))  
                                window.open(TUrl+"admin/order/bill/exportInfo/supplier?"+paramsArray.join('&'))
                            }
                        }
                    })
                }else{
                    layer.msg(res.msg)
                }
            })
            window.onShowImg = function(img) {
                http.photos('<div style="text-align:center;width:450px;height:450px;overflow:hidden;"><img src="' + TUrl+img + '" style="width:100%;height:100%;object-fit: contain"/></div>')
            }
			
			// 支付凭证
			$('#bannerUp').on('change', function () {
				formData = new FormData();
				var files = this.files;
				if(!files||files.length==0){
					return
				}
				for(var i=0;i<files.length;i++){
					formData.append('files', files[i]);
				}
				formData.append('fileType', 'img');
				formData.append('isFileName', false);
				
				$('.showDImg1').show().siblings('li').hide();
				onBannerUp(formData,files);
			});
			function onBannerUp(formData,files){
				http.upLoad('system/file/upload/batch',formData,function(res){
					$('#bannerUp').val('')
				    if(res.code == 200){
						var dataList = res.data;
						$('.detailsImg').hide()
						for(var i=0;i<dataList.length;i++){
							var imgId = http.getUUID();
							var html = '<div id="div'+imgId+'" class="imgdiv">'+
							    '<img onurl="'+dataList[i]+'" src="'+(TUrl+dataList[i])+'" id="proimg'+imgId+'">'+
							    '<ul class="imgul" id="span'+imgId+'">'+
							        '<li onclick="deleteimg(\'div'+imgId+'\')">移除</li>'+
							    '</ul>'+
							'</div>';
							$('.showDImg1').append(html);
							$('#div'+imgId+'').attr('onmouseover','showOperation(\'span'+imgId+'\')');
							$('#div'+imgId+'').attr('onmouseout','hideOperation(\'span'+imgId+'\')');
						}
						layer.msg('图片上传成功！', {
						    time: 500
						});
				    }else{
				        layer.msg(res.msg)
				    }
				})
			}
			
			// 修改凭证
			$(document).on('click','.onupdateOrderBillPayRecordFile',function(){
				var smallPic = [];
				$(".showDImg1").find("img").each(function(){
					var src =  $(this).attr("onurl");
					smallPic.push(src);
				});
				if(smallPic.length==0){
				    layer.msg('请上传支付凭证')
				    return
				}
			    http.post('admin/order/bill/updateOrderBillPayRecordFile',{
			        id: id,
			        payRecordFiles: JSON.stringify(smallPic)
			    },function(res) {
			        if(res.code == 200){
			            layer.msg('操作成功')
						setTimeout(function(){
						    window.history.back()
						},500)
			        }else{
			            layer.msg(res.msg)
			        }
			
			    })
			})
            
            // 支付凭证
            // $('#fileUpLoad').on('change', function () {
            //     var file = this.files
            //     var formData = new FormData();
            //     formData.append('file', file[0]);
            //     formData.append('fileType', 'img');
            //     formData.append('isFileName', false);
            //     http.upLoad('system/file/upload',formData,function(res){
            //         if(res.code == 200){
            //             imgFile = res.data
            //             $('.addFile').hide()
            //             $('.addFileImg').css('display','block')
            //             $('.addFileImg>img').attr('src',TUrl+imgFile)
            //             $('.addFileImg>img').click(function(){
            //                 http.photos('<div style="text-align:center;width:450px;height:450px;overflow:hidden;"><img src="' + TUrl+imgFile + '" style="width:100%;height:100%;object-fit: contain"/></div>')
            
            //             })
            //         }else{
            //             layer.msg(res.msg)
            //         }
            //     })
            // })
            // 支付凭证修改
            // $('#modifyFile').on('change', function () {
            //     var file = this.files
            //     var formData = new FormData();
            //     formData.append('file', file[0]);
            //     formData.append('fileType', 'img');
            //     formData.append('isFileName', false);
            //     http.upLoad('system/file/upload',formData,function(res){
            //         if(res.code == 200){
            //             var imgFile = res.data
            //             var imgId = http.getUUID();
			// 			var html = '<div id="div'+imgId+'" class="imgdiv">'+
            //                             '<img src="'+(TUrl+imgFile)+'" id="proimg'+imgId+'" onclick="onShowImg(\''+imgFile+'\')">'+
            //                         '</div>';
						
            //             $('.showMImg').html(html);
            //             onupdateOrderBillPayRecordFile(imgFile)
            //         }else{
            //             layer.msg(res.msg)
            //         }
            //     })
            // })
            // function onupdateOrderBillPayRecordFile(payRecordFiles) {
            //     http.post('admin/order/bill/updateOrderBillPayRecordFile',{
            //         id: id,
            //         payRecordFiles: payRecordFiles
            //     },function(res) {
            //         if(res.code == 200){
            //             layer.msg('操作成功')
            //         }else{
            //             layer.msg(res.msg)
            //         }

            //     })
            // }


            // 确认修改
            $(document).on('click','.modifyBtn',function(){
                if(deleteOrderList.length==0){
                    layer.msg('未进行修改')
                    return
                }
                http.myOpen({
                    title:'提示',
                    content:'<p style="text-align:center;margin-top:20px">是否确认修改账单！</p>',
                    area:['300px','150px'],
                    btn:['确定','取消'],
                    btn1:function(index, layero){

                        http.postJSON('admin/order/bill/delete/bill/order',JSON.stringify({
                            billId: id,
                            deleteOrderList: deleteOrderList
                        }),function(res){
                            if(res.code == 200){
                                layer.msg('操作成功')
                                layer.close(index)
                                setTimeout(function(){
                                    window.history.back()
                                },500)
                            }else{
                                layer.msg(res.msg)
                            }
                        })
                        
                    }
                });
            })

            // 支付账单
            $(document).on('click','.payBtn',function(){
                http.myOpen({
                    title:'提示',
                    content:'<p style="text-align:center;margin-top:20px">是否确认支付账单！</p>',
                    area:['300px','150px'],
                    btn:['确定','取消'],
                    btn1:function(index, layero){
						var smallPic = [];
						$(".showDImg1").find("img").each(function(){
							var src =  $(this).attr("onurl");
							smallPic.push(src);
						});
						
                        if(smallPic.length==0){
                            layer.msg('请上传支付凭证')
                            return
                        }
                        http.post('admin/order/bill/pay',{
                            billNo: id,
                            payRecordFiles: JSON.stringify(smallPic)
                        },function(res){
                            if(res.code == 200){
                                layer.msg('操作成功')
                                layer.close(index)
                                setTimeout(function(){
                                    window.history.back()
                                },500)
                            }else{
                                layer.msg(res.msg)
                            }
                        })
                        
                    }
                });
            })
        }
    })
	
	//显示图片操作
	function showOperation(imgId){
		$('#'+imgId+'').show();
	}
	//隐藏图片操作
	function hideOperation(imgId){
		$('#'+imgId+'').hide();
	}
	//图片移除
	function deleteimg(imgId){
		$('#'+imgId+'').remove();		
	}
</script>
</body>
</html>